{/* Copyright 2020 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License. */}

import {Layout} from '@react-spectrum/docs';
export default Layout;

import docs from 'docs:@react-spectrum/dialog';
import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
import packageData from '@react-spectrum/dialog/package.json';

```jsx import
import {ActionButton} from '@react-spectrum/button';
import {AlertDialog, DialogTrigger} from '@react-spectrum/dialog';
```

---
category: Overlays
keywords: [alert dialog]
---

# AlertDialog

<PageDescription>{docs.exports.AlertDialog.description}</PageDescription>

<HeaderInfo
  packageData={packageData}
  componentNames={['AlertDialog', 'DialogTrigger']}
  sourceData={[
    {type: 'Spectrum', url: 'https://spectrum.adobe.com/page/alert-dialog/'}
  ]}
  since="3.0.0" />

## Example

```tsx example
<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    title="Low Disk Space"
    variant="warning"
    primaryActionLabel="Confirm">
    You are running low on disk space.
    Delete unnecessary files to free up space.
  </AlertDialog>
</DialogTrigger>
```

## Content

Unlike [Dialog](Dialog.html), the layout in AlertDialog is very deliberate. The body of an AlertDialog can be provided by passing
children to the component. The AlertDialog also supports having up to three buttons in its footer: a primary button,
a secondary button, and a cancel button. Each button can be rendered by providing a string to the `primaryActionLabel`, `secondaryActionLabel`,
and `cancelLabel` respectively. Be sure to localize any strings provided to the AlertDialog and to the button labels as well.
AlertDialogs do not support a Fullscreen mode.

AlertDialogs should always have a visible title, specified by passing a string as the `title` prop. This string should be localized
so that it is properly internationalized.

```tsx example
<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="information"
    title="Register profile"
    primaryActionLabel="Register"
    secondaryActionLabel="Remind me later"
    cancelLabel="Cancel">
    You have not saved your profile information
    for this account. Would you like to register now?
  </AlertDialog>
</DialogTrigger>
```

### Accessibility

If any of the buttons in the AlertDialog's footer should be focused when it opens, specify which one via the `autoFocusButton` prop.

```tsx example
<DialogTrigger>
  <ActionButton>Save</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Save file"
    primaryActionLabel="Save"
    cancelLabel="Cancel"
    autoFocusButton="primary">
    A file with the same name already exists. Overwrite?
  </AlertDialog>
</DialogTrigger>
```

## Events

AlertDialog accepts an `onPrimaryAction`, `onSecondaryAction` and `onCancel` prop, triggered when the AlertDialog's confirm or cancel buttons are pressed respectively.

The example below uses `onPrimaryAction`, `onSecondaryAction` and `onCancel` to tell the user which button was pressed to close the AlertDialog.

```tsx example
function Example() {
  let onPrimaryAction = () => alert('Primary button pressed.');
  let onSecondaryAction = () => alert('Secondary button pressed.');
  let alertCancel = () => alert('Cancel button pressed.');

  return (
    <DialogTrigger>
      <ActionButton>
        Publish
      </ActionButton>
      <AlertDialog
        variant="confirmation"
        title="Confirm Publish"
        primaryActionLabel="Publish"
        secondaryActionLabel="Save as draft"
        cancelLabel="Cancel"
        onCancel={alertCancel}
        onPrimaryAction={onPrimaryAction}
        onSecondaryAction={onSecondaryAction}>
        Are you sure you want to publish this document?
      </AlertDialog>
    </DialogTrigger>
  );
}
```

## Props

<PropTable component={docs.exports.AlertDialog} links={docs.links} />

## Visual options

### Variant
[View guidelines](https://spectrum.adobe.com/page/alert-dialog/#Options)

**Confirmation**
```tsx example
<DialogTrigger>
  <ActionButton>Exit</ActionButton>
  <AlertDialog
    variant="confirmation"
    title="Exit instance?"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    Exit dungeon instance and return to main hub?
  </AlertDialog>
</DialogTrigger>
```
**Information**
```tsx example
<DialogTrigger>
  <ActionButton>New file</ActionButton>
  <AlertDialog
    variant="information"
    title="Connect your account"
    primaryActionLabel="Continue"
    cancelLabel="Cancel">
    Please connect an existing account to sync any new files.
  </AlertDialog>
</DialogTrigger>
```
**Destructive**
```tsx example
<DialogTrigger>
  <ActionButton>Delete</ActionButton>
  <AlertDialog
    variant="destructive"
    title="Delete file"
    primaryActionLabel="Delete"
    cancelLabel="Cancel">
    This will permanently delete the selected file. Continue?
  </AlertDialog>
</DialogTrigger>
```
**Error**
```tsx example
<DialogTrigger>
  <ActionButton>Login</ActionButton>
  <AlertDialog
    variant="error"
    title="Unable to connect"
    primaryActionLabel="Retry"
    cancelLabel="Cancel">
    Something went wrong while connecting to the server.
    Please try again in a couple minutes.
  </AlertDialog>
</DialogTrigger>
```
**Warning**
```tsx example
<DialogTrigger>
  <ActionButton>Enter</ActionButton>
  <AlertDialog
    variant="warning"
    title="Raid instance"
    primaryActionLabel="Confirm"
    cancelLabel="Cancel">
    The following encounter meant for parties of 4 or more. Enter anyways?
  </AlertDialog>
</DialogTrigger>
```

### Primary action disabled

Disables the primary button.

```tsx example
<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isPrimaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>
```

### Secondary action disabled

Disables the secondary button.

```tsx example
<DialogTrigger>
  <ActionButton>Upgrade</ActionButton>
  <AlertDialog
    isSecondaryActionDisabled
    variant="confirmation"
    title="Upgrade subscription"
    primaryActionLabel="Upgrade"
    secondaryActionLabel="Apply Coupon"
    cancelLabel="Cancel">
    Upgrade subscription for an additional $14.99 a month?
  </AlertDialog>
</DialogTrigger>
```

## Testing

The AlertDialog features an overlay that transitions in and out of the page as it is opened and closed.
Please see the following sections in the testing docs for more information on how to handle these behaviors in your test suite.

[Timers](./testing.html#timers)

Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/contextualhelp/test/ContextualHelp.test.js) if you find that the above
isn't sufficient when resolving issues in your own test cases.

To identify a particular instance of the cancel, secondary, or confirm button, you can use the following data-testid's respectively:
- `"rsp-AlertDialog-cancelButton"`
- `"rsp-AlertDialog-secondaryButton"`
- `"rsp-AlertDialog-confirmButton"`